<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
	<link rel="styleheet" href="./demo/js/init.css"/>
    <style>
        canvas{background: black;display: block}
		.main {
			background-color: #000000db;
			width: 300px;
			height: 130px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.one {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.one p {
			color: green;
			text-align: center;
		}
		.one input {
			border: none;
			height: 30px;
			width: 200px;
			font-size: 18px;
			color: green;
			background-color: #5d596752;
		}
		input:focus{
			outline:none;
		}
    </style>
</head>
<body>
    <CANVAS></canvas>
	<div class="main">
		<div class="one">
			<p>输入密码</p>
			<input type="password" />
		</div>
		
	</div>
	<script src="./demo/js/jquery3.4.1.js"></script>
    <script>
		init();
		function init(){
			getEnter();
			getBackgound();
		}
		//回车搜索
		function getEnter(){
			$('.one input').bind('keydown', function (event) {
				var event = window.event || arguments.callee.caller.arguments[0];
				if (event.keyCode == 13){
					searKeywordCache = $('.one input').val();
					if(searKeywordCache === "ling"){
						window.location.href="./demo/index.html";
					}else {
						alert("密码错误！");
					}
				}
			});
		}
		//背景
		function getBackgound(){
			var oC = document.querySelector('canvas');
			var cxt = oC.getContext('2d');
			var w = oC.width = window.innerWidth;
			var h = oC.height = window.innerHeight;
			var onOff = true;
			window.addEventListener('resize',function () {
				w = oC.width = window.innerWidth;
				h = oC.height = window.innerHeight;
			});

			var arr = new Array(255).join('1').split('');
			console.log( arr )
			draw();
			function draw() {
				if(onOff){
					cxt.fillStyle = 'rgba(0,0,0,0.05)';
					cxt.fillRect(0,0,w,h);
				}else{
					cxt.clearRect(0,0,w,h);
				}
				cxt.fillStyle = 'rgb(0,255,0)'; // 绿色的字母
				//cxt.fillStyle = randomColor(); // 彩色的字母
				arr.map(function (value,index) {
					cxt.font = '16px 宋体';
					text = String.fromCharCode(65+Math.random()*57);// 把ASCII转换成对应的字符串;
					x = index*10;

					cxt.fillText(text,x,value);
					arr[index] = ( (value>h+Math.random()*500)?0:value+15 );
				})
				requestAnimationFrame(draw);
			}

			function randomColor() {
				var r = Math.floor(Math.random()*256);
				var g = Math.floor(Math.random()*256);
				var b = Math.floor(Math.random()*256);
				return 'rgb('+r+','+g+','+b+')';
				
			}
		}
        
    </script>
</body>
</html>